<template>
  <div class="setting-pages">
    <cp-nav-bar left-arrow title="设置"></cp-nav-bar>
    <van-cell title="切换主题" is-link @click="show = true" />
    <van-cell title="修改密码" is-link @click="$router.push('/changePassword')" />
    <div class="logout" @click="logout">退出登录</div>
    <van-action-sheet
      v-model:show="show"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @select="selectAction"
    />
  </div>
</template>
<script setup lang="ts">
import { useUserStore } from '@/stores'
import { showToast } from 'vant'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const show = ref(false)

const store = useUserStore()
const router = useRouter()
const actions = [{ name: '浅绿(默认)' }, { name: '暗黑' }]
const logout = () => {
  store.delUser()
  router.push('/login')
  showToast('退出登录成功')
}
const selectAction = (value: { name: string }) => {
  if (value.name === '浅绿(默认)') {
    document.documentElement.classList.remove('dark-theme')
  } else {
    document.documentElement.classList.add('dark-theme')
  }
}
</script>
<style lang="scss" scoped>
.setting-pages {
  padding-top: 45px;
  height: 100vh;
  box-sizing: border-box;
  background-color: var(--bg-primary);
  height: 100vh;
  box-sizing: border-box;
  .logout {
    height: 60px;
    opacity: 1;
    background: var(--bg-tertiary);
    margin-top: 50px;
    text-align: center;
    line-height: 60px;
  }
}
</style>
